:root {
    --kangaroo: #b8a1a0;
    --flamingo: #b59a9a;
    --unicorn: #b87d9b;
    --platypus: #9f82bd;
    --raccoon: #b26c80;
    --tortoise: #b37884;
    --dinosaur: #ba8569;
    --yak: #baa778;
    --lizard: #82b37b;
    --chameleon: #73b2a8;
    --stingray: #6ca7b3;
    --narwhal: #5ca0b2;
    --dolphin: #6c8fb9;
    --jellyfish: #8b96bf;
    --cuttlefish: #9ba3b6;
    --walrus: #9299a3;
    --penguin: #7f8392;
    --meerkat: #73767e;
    --weasel: #626474;
    --mongoose: #54565c;
    --lemur: #464858;
    --hamster: #353645;
    --badger: #24242f;
    --kitten: #15151d;
    --puppy: #141417;
    --hamster: #0d0d0f;
}

body {
    font-family: 'Roboto', sans-serif;
    background-color: var(--kitten);
    color: var(--cuttlefish);
    margin: 0;
    padding: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
}

select {
    background-color: var(--opossum);
    color: var(--jellyfish);
    font-size: 18px;
}

textarea {
    background-color: var(--opossum);
    color: var(--cuttlefish);
}

.container {
    display: flex;
    justify-content: space-between;
    padding: 10px;
    width: 100%;
    height: 95%;
}

form {
    flex-basis: 20%;
    padding-left: 20px;
}

.third-box {
    box-sizing: border-box; 
    padding: 1em;
    border: 1px solid var(--border-color);
    border-radius: 1em;
    box-shadow: 0px 2px 5px rgba(0, 0, 0, 0.2);
    background-color: var(--kitten);
}

.audio-padding {
    height: 20px;
}

.prompt-queue {
    flex-basis: 30%;
    overflow-y: auto;
    overflow-x: hidden;
    display: flex;
    flex-direction: column;
    align-items: center;
    overflow-y: auto;
    overflow-x: hidden;
    max-height: 95vh;
}

.audio-list {
    flex-basis: 30%;
    max-height: 95vh;
    height:90%;
    overflow-y: auto;
    overflow-x: hidden;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding-right: 20px;
}

@keyframes fadeIn {
    0% {opacity: 0;}
    100% {opacity: 1;}
}

.audio-item {
    width:95%;
    max-width: 95%;
    display: flex;
    align-items: center;
    margin-bottom: 10px;
    padding: 10px;
    border: 1px solid var(--hamster);
    border-radius: 5px;
    box-shadow: 0px 0px 5px var(--flamingo);
    justify-content: space-between;
    animation: fadeIn 1.8s;
}

.audio-list::-webkit-scrollbar {
    width: 10px;
}

.audio-list::-webkit-scrollbar-track {
    background: transparent;
}

.audio-list::-webkit-scrollbar-thumb {
    background: rgba(0, 0, 0, 0.5);
    border-radius: 20px;
}

.audio-item-text {
    max-width: 90%;
    overflow-wrap: break-word;
    text-align: left;
}

.field {
    margin-bottom: 2em;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    margin:auto;
    flex-basis: 0;
    padding: 10px;
    flex-grow: 1;
}

.field label {
    display: block;
    margin-bottom: 0.5em;
    color: var(--light-text-color); 
    font-size: 1.2em;
    font-weight: 500;
}

.submit-container {
    flex-grow: 1;
    width: 100%;
    border: 1px solid var(--lemur);
    background-color: var(--badger);
    border-radius: 10px;
    padding: 10px;
    box-shadow: 0px 2px 5px rgba(0, 0, 0, 0.2);
}

.input-wrapper {
    display: flex;
    flex-direction: column;
    width: 100%;
}

.input-wrapper textarea {
    resize: none;
    margin-bottom: 10px;
    border-radius: 12px;
}

.input-wrapper input[type="submit"] {
    align-self: flex-end;
    font-size: 1.2em;
    font-weight: bold;
}

.submit-container input[type="text"] {
    flex-grow: 1;
    margin-right: 1em;
    background-color: var(--opossum);
    border: none;
    border-radius: 0.25em;
    color: var(--cuttlefish);
    padding: 0.5em;
    transition: all 0.3s ease;
}

.submit-container input[type="submit"] {
    background-color: var(--flamingo);
    color: var(--kitten);
    border: none;
    padding: 0.25em 1.5em; 
    border-radius: 0.25em;
    cursor: pointer;
    transition: all 0.3s ease;
}

.submit-container input[type="submit"]:hover {
    background-color: var(--platypus);
}

.submit-container input[type="submit"]:active {
    background-color: var(--unicorn);
    transform: scale(0.95);
}

.model-melody {
    display: flex;
    flex-wrap: nowrap;
    align-items: start;
}

.group {
    display: flex;
    justify-content: space-between;
}

.slider-group {
    padding-bottom: 50px;
    padding-top: 50px;
}

.slider-value {
    background-color: var(--jellyfish);
    width: 40px;
    text-align: center;
    border: 3px;
    border-radius: 20px;
}

.group > div {
    flex-basis: 50%;
}

@keyframes gradient {
    0% {background-position: 0% 50%;}
    50% {background-position: 100% 50%;}
    100% {background-position: 0% 50%;}
}

.loading {
    background: linear-gradient(-83deg, var(--flamingo), var(--lizard), var(--meerkat));
    background-size: 400% 400%;
    animation: gradient 1.8s ease infinite;
    color: white; /* Change text color so it's readable on the gradient */
}